<template>
  <div id="wfDesign">
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :is-view="false"
      :categories="categories"
      :categories-fields="categoriesFields"
      :users="users"
      :groups="groups"
      :candidate-user-data-source="candidateUserDataSource"
      :candidate-group-data-source="candidateGroupDataSource"

      :paletteToolShow="paletteToolShow"
      :panelFilters="panelFilters"
      :paletteFilters="paletteFilters"
      :associate-form-config="associateFormConfig"
      :associate-form-data-options="associateFormDataOptions"
      :assignee-data-source="assigneeDataSource"
      :due-date-data-source="dueDateDataSource"
      :follow-up-date-data-source="followUpDateDataSource"
      :initiator-data-source="initiatorDataSource"
      :skip-expression-data-source="skipExpressionDataSource"
      :condition-expression-data-source="conditionExpressionDataSource"
      @save="saveModeler"
      @showForm="showAssociateForm"
      @createForm="createAssociateForm"
      @showUser="showSelectUser"
    >
      <!--左边扩展按钮示例-->
      <div slot="header-left">
        <a-button>左边扩展</a-button>
      </div>
      <!--右边扩展按钮示例-->
      <div slot="header-right">
        <a-button>右边扩展</a-button>
      </div>
    </bpmn-modeler>

    <a-modal :visible="formShowVisible" title="显示表单" width="400px" @change="formShowVisible = $event">
      <template #footer>
      </template>
      【显示表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....
    </a-modal>
    <a-modal :visible='formCreateVisible' title="创建表单" width="400px" @change="formCreateVisible = $event">
      <template #footer>
      </template>
      【创建表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....
    </a-modal>

    <a-modal :visible="formSaveVisible" title="保存表单" width="1000px" @change='formSaveVisible = $event'>
      <template #footer>
      </template>

      <div style="display: flex;flex-direction: column">
        <div>
          【ID:{{ result.id }}】【流程名称:{{ result.name }}】【分类:{{ result.category }}】
        </div>
        <div v-html="result.svg">

        </div>
      </div>

    </a-modal>
    <a-modal
      title="选择人员"
      :visible="selectUserOpen"
      @cancel="handleCancel"
      @ok="handleChange"
      width="1200px"
    >
      <select-user ></select-user>
    </a-modal>
  </div>
</template>

<script>
// 需要依赖ant-design-vue和less
/**
 * package包引入
 * 内部依赖版本：
 * "bpmn-js": "^7.2.1",
 * "vue-codemirror": "^4.0.6"
 */

// 1.0.1 版本引用
// import bpmnModeler from 'workflow-bpmn-modeler-antdv/package/';
// 1.0.2 版本引用
// import bpmnModeler from 'workflow-bpmn-modeler-antdv';
import { saveXmlModel, viewXmlData } from '@/api/workflow/workflow'
import { selectRoleAll } from '@/api/system/role'
import selectUser from '@/views/system/user/modules/SelectUser'
import { getUserAll } from '@/api/system/user'
import bpmnModeler from '@/components/flowable/index.vue'
export default {
  components: {
    bpmnModeler,
    selectUser
  },
  data () {
    return {
      result: {
        svg: '',
        category: '',
        name: '',
        id: ''
      },
      formSaveVisible: false,
      xml: '', // 后端查询到的xml
      selectUserOpen: false,
      // 指定或候选人
      users: [
      ],
      // 候选组
      groups: [
      ],
      // 分类
      categories: [
      ],
      // 分类树状结构与具体转换
      // 此结构是默认结构，如果数据结构一致则无需单独配置
      categoriesFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id'
      },
      // 过滤面板参数，参数见文档
      panelFilters: [],
      // panelFilters: ['category','message'],
      // 左侧操作组件栏过滤，过滤参数见文档
      // paletteFilters:['space-tool','create.start-event','create.task'],
      paletteFilters: [],
      // 左侧操作组件栏，行为组件是否显示，设置false组件的操作栏将被隐藏
      paletteToolShow: true,
      // 头部右侧操作栏显示内容配置
      rightActionConfig: {
        'showCode': {
          'show': true,
          'icon': true,
          'label': 'XML'
        },
        'downloadXML': {
          'show': true,
          'icon': true,
          'label': 'XML'
        },
        'downloadSVG': {
          'show': true,
          'icon': true,
          'label': 'SVG'
        },
        'save': {
          'show': true,
          'icon': true,
          'label': '保存'
        }
      },
      /**
       * 关联表单配置
       */
      associateFormConfig: {
        enable: true, // 此项为false，显示表单标识输入框，后两项设置两项均无效
        isPreview: true,
        isCreate: true
      },
      // 关联表单动态表达式数据源
      associateFormDataOptions: [],
      // 分配指定人动态表达式数据源
      // eslint-disable-next-line no-template-curly-in-string
      assigneeDataSource: ['#{approval}', '${approverId}', '${INITIATOR}'],
      // 分配候选人动态表达式数据源
      candidateUserDataSource: ['#{approval}', '#{app}'],
      // 分配候选组动态表达式数据源
      candidateGroupDataSource: ['#{approval}', '#{app}'],
      // 过期时间动态表达式数据源
      // eslint-disable-next-line no-template-curly-in-string
      dueDateDataSource: ['${dueDate}'],
      // 观察时间动态表达式数据源
      // eslint-disable-next-line no-template-curly-in-string
      followUpDateDataSource: ['${followUpDate}'],
      // 开始节点发起人动态表达式数据源
      initiatorDataSource: ['initiator'],
      // 跳过表达式动态表达式数据源
      skipExpressionDataSource: [],
      // 跳转表达式动态表达式数据源
      // eslint-disable-next-line no-template-curly-in-string
      conditionExpressionDataSource: ['${approve}', '${!approve}'],

      // 自己业务数据
      // 关联表单扩展，用于接入flowable动态表单或其他自定义动态表单
      formShowVisible: false,
      formCreateVisible: false
    }
  },
  mounted () {
    const deployId = this.$route.query && this.$route.query.deployId
    if (deployId) {
      this.getModelDetail(deployId)
    } else {
      this.getModelDetail('0')
    }
    // 查询人员
    this.getUserAll()
    // 查询流程分类
    this.getDicts('sys_workflow_type').then(response => {
      this.categories = response.data.map(e => {
        return {
          title: e.dictLabel,
          key: e.dictValue,
          value: e.dictValue,
          children: []
        }
      })
    })
    // 获取角色
    selectRoleAll().then(res => {
      if (res.code === 200) {
        this.groups = res.data.map(e => {
          return {
            id: e.roleId,
            name: e.roleName
          }
        })
      }
    })
  },
  methods: {
    getModelDetail (deployId) {
      viewXmlData(deployId).then(res => {
        if (res.code === 200) {
          this.xml = res.data.xml
          this.categoriesFields = { category: res.data.category }
        }
      })
    },

    saveModeler (data) {
      const params = {
        wfName: data.process.name,
        wfCategory: data.process.category,
        xml: encodeURIComponent(data.xml)
      }
      console.log(params)
      saveXmlModel(params).then(res => {
        if (res.code === 200) {
          this.$message.success(
            '发布成功',
            3
          )
          this.getModelDetail(res.data)
          this.$router.push({ path: '/workflow/deploy', query: { } })
        }
      })
    },
    showAssociateForm (formKey) {
      console.log(formKey)
      this.formShowVisible = true
    },
    createAssociateForm () {
      console.log('create form')
      this.formCreateVisible = true
    },
    showSelectUser () {
      this.selectUserOpen = true
    },
    // 取消弹框
    handleCancel () {
      this.selectUserOpen = false
    },
    // 确认
    handleChange () {

    },
    // 获取候选人
    getUserAll () {
      // getUserAll({ status: '1' }).then(res => {
      //   if (res.code === 200) {
      //     this.users = res.data.map(e => {
      //       return {
      //         id: e.userId,
      //         name: e.deptFullName + '/' + e.nickName
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>

<style lang="less">
#wfDesign {
  height: 800px;
  margin: 0;
}
</style>
